<template>
  <!-- <div class="test_box"></div> -->
  <!-- <span class="iconfont">&#xe78a;</span>

  <div class="page ml-4" @dragover="(e) => e.preventDefault()" @drop="drop">
    <Icon icon="iconamoon:3d-fill" :size="32" />2
    <n-space :size="24">
      <n-button type="primary" v-for="item in data" :key="item.url" @click="jump(item.url)">{{
        item.label
      }}</n-button>
    </n-space>
    <n-button v-debounce="{ callback: clickBtn, delay: 3000 }">debounce1</n-button>
    <n-button v-debounce="clickBtn">debounce2</n-button>
    <n-button v-throttle="clickBtn">throttle1</n-button>
    <n-button v-throttle="{ callback: clickBtn, delay: 4000 }">throttle2</n-button>

    <div
      class="fixed_wrapper"
      :draggable="true"
      ref="dragEl"
      @dragstart="dragstart"
      @dragend="dragend"
    ></div>

    <div class="fixed_wrapper2"></div>

    <basic-editor></basic-editor>
  </div> -->
  <div style="width: 100%; height: 100vh; margin: 0 auto; background-color: #eee">
    <BasicTMap
      class="map_box"
      :geo-data="geoData"
      :block-config="{}"
      :block-data="blockData"
      :bar-data="barData"
      :hidden-area-name="mapConfig.hiddenAreaName"
      @area-click="changeDistrict"
    ></BasicTMap>
  </div>
  <!-- <div style="width: 100%; height: 300px; margin: 0 auto; background-color: #eee">
    <BasicTMap
      :geo-data="geoData"
      :block-data="blockData"
      :hidden-area-name="mapConfig.hiddenAreaName"
      @area-click="changeDistrict"
    ></BasicTMap>
  </div> -->
</template>

<script setup lang="ts">
import { BlockDataItem, GeoData, BarDataItem } from '@/components/basic-TMap/types'
import { getDistrictGeoData } from '@/components/districtSearch/districtGeo'

import BasicTMap from '@/components/basic-TMap/index.vue'

const geoData = ref<GeoData>({ features: [] })

const mapConfig = ref({
  hiddenAreaName: false
})

const blockData = ref<Array<BlockDataItem>>([
  // {
  //   name: '山西省',
  //   value: 500
  // },
  // {
  //   name: '广州省',
  //   value: 1500
  // },
  // {
  //   name: '黑龙江省',
  //   value: 800
  // },
  // {
  //   name: '江西省',
  //   value: 300
  // }
])

const barData = ref<Array<BarDataItem>>([
  // {
  //   name: '山西省',
  //   value: 500
  // },
  // {
  //   name: '广州省',
  //   value: 1500
  // },
  // {
  //   name: '黑龙江省',
  //   value: 800
  // },
  // {
  //   name: '江西省',
  //   value: 300
  // }
])

setTimeout(() => {
  // mapConfig.value.hiddenAreaName = true
  // getGeoData(350000)
  blockData.value = [
    {
      name: '北京市',
      value: 1000
    },
    {
      name: '山西省',
      value: 500
    },
    {
      name: '黑龙江省',
      value: 1800
    },
    {
      name: '江西省',
      value: 300
    }
  ]
  barData.value = [
    {
      name: '山西省',
      value: 500
    },
    {
      name: '广州省',
      value: 1500
    },
    {
      name: '黑龙江省',
      value: 800
    },
    {
      name: '江西省',
      value: 300
    }
  ]
}, 2000)

setTimeout(() => {
  barData.value = [
    {
      name: '广东省',
      value: 2500
    },
    {
      name: '内蒙古自治区',
      value: 1500
    },
    {
      name: '西藏自治区',
      value: 800
    },
    {
      name: '江苏省',
      value: 300
    }
  ]
}, 4000)

setTimeout(() => {
  // mapConfig.value.hiddenAreaName = true
  // getGeoData(350000)
  // blockData.value = [
  //   {
  //     name: '南平市',
  //     value: 500
  //   },
  //   {
  //     name: '宁德市',
  //     value: 800
  //   },
  //   {
  //     name: '龙岩市',
  //     value: 300
  //   }
  // ]
}, 4000)

const changeDistrict = (val: any) => {
  console.log(val)

  blockData.value = [
    {
      name: '南平市',
      value: 500
    },
    {
      name: '宁德市',
      value: 800
    },
    {
      name: '龙岩市',
      value: 300
    }
  ]
  barData.value = [
    {
      name: '南平市',
      value: 500
    },
    {
      name: '宁德市',
      value: 800
    },
    {
      name: '龙岩市',
      value: 300
    }
  ]
  getGeoData(val.adcode)

  setTimeout(() => {
    barData.value = [
      {
        name: '南平市',
        value: 15000
      },
      {
        name: '宁德市',
        value: 500
      },
      {
        name: '龙岩市',
        value: 500
      }
    ]
  }, 3000)
}

async function getGeoData(adcode: number) {
  const res = await getDistrictGeoData(adcode)
  console.log(res)
  geoData.value = res
}

onMounted(async () => {
  // getGeoData(330108)
  // getGeoData(100000)
})
getGeoData(100000)

function clickBtn() {
  console.log('click')
}

const router = useRouter()

const data = ref([
  {
    label: '表单',
    url: '/exampleForm'
  },
  {
    label: '地图',
    url: '/exampleMap'
  },
  {
    label: '弹窗',
    url: '/exampleModal'
  },
  {
    label: '滚动加载列表',
    url: '/exampleScrollList'
  },
  {
    label: '锚点定位tab',
    url: '/exampleAnchorTab'
  },
  {
    label: '标签省略',
    url: '/exampleAnchorTab'
  },
  {
    label: '普通表格',
    url: '/exampleTableList'
  },
  {
    label: 'echarts-hooks',
    url: '/exampleEChart'
  }
])

function jump(url: string) {
  router.push(url)
}

// 拖拽
const dragEl = ref<HTMLElement | null>(null)
function dragstart(e: Event) {
  console.log(e)
}
function dragend(e: Event) {
  e.preventDefault()
  console.log(e, 'dragend')
}

function drop(e: Event) {
  e.preventDefault()
  console.log(e)
}
/////////////////////
// interface A {
//   name: string
//   age: number
//   date: string
//   [key: string]: any
// }

// type B = keyof A
// type C = keyof any

// type D = {
//   [T in keyof A]: string
// }

// const date: D = {
//   name: '',
//   age: '',
//   date: ''
// }
// type E = typeof date

// type F = Record<C, A>

// const date2: F = {
//   AA: {
//     name: '',
//     age: 2,
//     date: ''
//   },
//   2: {
//     name: '',
//     age: 2,
//     date: ''
//   }
// }

// type G = Pick<A, 'age' | 'color'>
// const date3: G = {
//   age: 22,
//   color: 22
// }

// type H = Partial<A>
// const date4: H = {}

// type I = Required<A>

// type J = Readonly<A>

// const date5: J = { age: 22, name: '22', date: 'AA' }
// // date5.age = 44

// interface A2 {
//   name: string
//   age: number
//   date: string
// }
// type K = Exclude<B, 'name'>
// type K3 = Exclude<C, 'age'>
// type K2 = {
//   [T in K]: string
// }
// const date6: K2 = {
//   22: '',
//   aa: ''
// }

// type L = Extract<keyof A2, 'name' | 'age'>
// type L2 = {
//   [T in L]: string
// }
// const date7: Partial<L2> = {}

// type M = Omit<A2, 'name' | 'age'>

// ts test

// 15 实现一个通用Last<T>，它接受一个数组T并返回其最后一个元素的类型。
type Last<T extends any[]> = T extends [...infer B, infer D, infer P] ? D : never

type arr1 = ['a', 'b', 'c']
type arr2 = [3, 2, 1]

type tail1 = Last<arr1> // expected to be 'c'
type tail2 = Last<arr2> // expected to be 1

// 实现 Replace<S, From, To> 将字符串 S 中的第一个子字符串 From 替换为 To 。
type Replace<S extends string, From extends string, To extends string> = From extends ''
  ? S
  : S extends `${infer L}${From}${infer R}`
  ? `${L}${To}${R}`
  : S

type replaced = Replace<'types are fun!', 'fun', 'awesome'> // 期望是 'types are awesome!'

interface Cat {
  type: 'cat'
  breeds: 'Abyssinian' | 'Shorthair' | 'Curl' | 'Bengal'
}

interface Dog {
  type: 'dog'
  breeds: 'Hound' | 'Brittany' | 'Bulldog' | 'Boxer'
  color: 'brown' | 'white' | 'black'
}

type LookUp<T, K extends string> = T extends { type: K } ? T : never

type MyDog = LookUp<Cat | Dog, 'dog'> // expected to be `Dog`

type Permutation<T, K = T> = [T] extends [never]
  ? []
  : K extends K
  ? [K, ...Permutation<Exclude<T, K>>]
  : never

type perm = Permutation<'A' | 'B' | 'C'>

type ObjectEntries<T extends Record<string, any>, K = keyof T> = K extends keyof T ? [K, T[K]] : []

interface Model {
  name: string
  age: number
  locations: string[] | null
}
type modelEntries = ObjectEntries<Model> // ['name', string] | ['age', number] | ['locations', string[] | null];

type PromiseParseAll<T extends any[]> = T extends [infer P, ...infer O]
  ? P extends Promise<infer R>
    ? [R, ...PromiseParseAll<O>]
    : [P, ...PromiseParseAll<O>]
  : []
type PromiseAll<T extends any[]> = Promise<PromiseParseAll<T>>
// expected to be `Promise<[number, 42, string]>`
type PRes = PromiseAll<[Promise<number>, 42, Promise<string>]>

type TrimLeft<T extends string> = T extends `${infer L}${infer R}`
  ? L extends ' ' | '\n' | '\t'
    ? TrimLeft<R>
    : T
  : never
type trimed = TrimLeft<'  Hello World '> // 应推导出 'Hello World '
</script>

<style>
.test_class {
  color: red;
}
</style>

<style lang="less" scoped>
.map_box {
  :deep(.three_map_tooltip_box) {
    background: rgba(0, 0, 0, 0.6);
  }
  :deep(.three_map_tooltip_value) {
    color: red;
    font-weight: bold;
  }
}

.test_box {
  width: 100px;
  height: 100px;
  background: @basicClolr;
}
.page {
  width: 100vw;
  height: 100vh;

  .fixed_wrapper {
    position: fixed;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.1);
  }

  .fixed_wrapper2 {
    width: 400px;
    height: 400px;
    border: 1px solid rgba(0, 0, 0, 0.5);
  }
}
</style>
